<template>
  <div style="width: 60%; margin: 10px auto">
    <div class="card" style="padding: 30px 20px; margin-bottom: 10px">
      <div style="text-align: center; margin-bottom: 20px; font-size: 20px; font-weight: bold">{{data.postInfo.title }}</div>
      <div style="text-align: center; color: #666;">
        <span>发布时间: {{ data.postInfo.createTime }}</span>
        <span style="margin-left: 30px">发帖人: {{ data.postInfo.userName }}</span>
        <span style="margin-left: 30px">浏览量: {{ data.postInfo.viewCount }}</span>
      </div>

      <div style="margin: 30px" v-html="data.postInfo.content"></div>
    </div>

    <div class="card" style="padding: 20px">
      <div style="font-size: 24px; font-weight: bold; margin-bottom: 10px">评论总共 {{ data.commentTotal }} 条</div>
      <div style="margin-bottom: 5px">
        <el-input type="textarea" :rows="3" v-model="data.form.content" placeholder="请输入评论"></el-input>
      </div>
      <div style="text-align: right">
        <el-button size="large" type="primary" @click="sendComment">发布评论</el-button>
      </div>

      <div style="margin: 20px 0">
        <div v-for="comment in data.commentList" :key="comment.id" >
          <div style="display: flex; grid-gap: 20px; margin-bottom: 20px">
            <img :src="comment.userAvatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
            <div style="flex: 1">
              <div style="margin-bottom: 10px; color: #666">{{ comment.userName }}</div>
              <div style="margin-bottom: 10px; font-size: 16px">{{ comment.content }}</div>
              <div style="color: #666; margin-bottom: 10px">
                <span>时间：{{ comment.createTime }}</span>
                <span @click="handleReply(comment)" style="margin-left: 30px; cursor: pointer">回复</span>
                <!--只有楼主及评论者才可以删除评论-->
                <span v-if="comment.userId === data.user.id || data.postInfo.userId === data.user.id"
                      style="margin-left: 10px;
                      cursor: pointer"
                      @click="deleteComment(comment.id)">删除</span>
              </div>
              <div v-if="comment.showReply">
                <el-input type="textarea" :rows="2" v-model="comment.replyContent" placeholder="请输入回复内容"></el-input>
                <div style="margin-top: 5px; text-align: right">
                  <el-button type="primary" @click="replyComment(comment)">回复</el-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 回复开始 -->
          <div style="padding-left: 70px">
            <div v-for="sub in comment.childComment" :key="sub.id" >
              <div style="display: flex; grid-gap: 20px; margin-bottom: 20px">
                <img :src="sub.userAvatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
                <div style="flex: 1">
                  <div style="margin-bottom: 10px; color: #666">{{ sub.userName }} <span style="color: #000">回复 @{{ sub.parentCommentUserName }}</span></div>
                  <div style="margin-bottom: 10px; font-size: 16px">{{ sub.content }}</div>
                  <div style="color: #666; margin-bottom: 10px">
                    <span>时间：{{ sub.createTime }}</span>
                    <span style="margin-left: 30px; cursor: pointer" @click="handleReply(sub)">回复</span>
                    <!--只有楼主及评论者才可以删除评论-->
                    <span v-if="sub.userId === data.user.id || data.postInfo.userId === data.user.id"
                          style="margin-left: 10px; cursor: pointer" @click="deleteComment(sub.id)">删除</span>
                  </div>
                  <div v-if="sub.showReply">
                    <el-input type="textarea" :rows="2" v-model="sub.replyContent" placeholder="请输入回复内容"></el-input>
                    <div style="margin-top: 5px; text-align: right">
                      <el-button type="primary" @click="replyComment(sub)">回复</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
  import { reactive } from "vue";
  import request from "@/utils/request.js";
  import router from "@/router/index.js";
  import {ElMessage, ElMessageBox} from "element-plus";

  const data = reactive({
    user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
    id: router.currentRoute.value.query.id, // 帖子 id
    postInfo: {},
    commentTotal: 0,
    form: {},
    commentList: [],
  })

  // 帖子浏览量 + 1
  request.put('/post/update/view?id=' + data.id).then(res => {
    if (res.code === '200') {
      // 查询帖子详情
      request.get('/post/query/detail?id=' + data.id).then(res => {
        if (res.code === '200') {
          data.postInfo = res.data
        } else {
          ElMessage.error(res.msg)
        }
      })
    } else {
      ElMessage.error(res.msg)
    }
  })

  // 查询帖子的评论树
  const loadCommentTree = () => {
    //  查询帖子的评论树
    request.get('/comment/query/tree/?postId=' + data.id).then(res => {
      if (res.code === '200') {
        data.commentList = res.data
      } else {
        ElMessage.error(res.msg)
      }
    })

    //  查询帖子的评论数量
    request.get('/comment/total?postId=' + data.id).then(res => {
      if (res.code === '200') {
        data.commentTotal = res.data
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
  loadCommentTree()

  // 发布评论
  const sendComment = () => {
    if (!data.form.content) {
      ElMessage.warning('请输入评论')
      return
    }
    request.post('/comment/send', {
      postId: data.id,
      content: data.form.content,
      parentId: null,
      rootId: null,
    }).then(res => {
      if (res.code === '200') {
        data.form.content = null
        loadCommentTree()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }

  // 点击回复事件
  const handleReply = (comment) => {
    comment.showReply = !comment.showReply
    comment.replyContent = ''
  }


  // 回复评论
  const replyComment = (parentComment) => {
    if (parentComment) {  // 回复
      data.form.content = parentComment.replyContent
      data.form.parentId = parentComment.id
      data.form.rootId = parentComment.rootId
      parentComment.replyContent = ''
    }
    if (!data.form.content) {
      ElMessage.warning('请输入评论内容')
      return
    }
    data.form.postId = data.id
    request.post('/comment/reply', data.form).then(res => {
      if (res.code === '200') {
        ElMessage.success('操作成功')
        data.form = {}
        loadCommentTree()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }

  // 删除评论
  const deleteComment = (id) => {
    ElMessageBox.confirm('删除评论后，评论的回复也会删除，您确定删除吗？', '确认', { type: 'warning' }).then(res => {
      request.delete('/comment/delete/' + id).then(res => {
        if (res.code === '200') {
          loadCommentTree()
        } else {
          ElMessage.error(res.msg)
        }
      })
    })
  }
</script>

<style>

</style>